<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 自己封装的全局通用栏 -->
      <page-tools :show-before="true">
        <span slot="before">共{{ page.total }}条记录</span>
        <template slot="after">
          <el-button size="small" type="warning" @click="$router.push('/import')">导入</el-button>
          <el-button size="small" type="danger" @click="exportEmployees">导出</el-button>
          <el-button size="small" type="primary" :disabled="!checkPermission('addEmployee')" @click="showDialog=true">新增员工</el-button>
        </template>
      </page-tools>
      <!-- 放置表格和分页 -->
      <el-card>
        <el-table border :data="list">
          <el-table-column label="序号" sortable="" type="index" :index="getIndex">
            <!-- 使用具名插槽完成序列号处理 -->
            <!-- <template #default="scoped">
              当前行的索引 scoped.$index+1
              将每行的索引加上之前各页的总数就是当前行的真正索引
              {{ page.size*(page.page-1) + scoped.$index+1 }}
            </template> -->
          </el-table-column>
          <el-table-column label="缩略图" width="200">
            <template #default="scoped">
              <img
                v-imgerr="require('@/assets/common/head.jpg')"
                :src="scoped.row.staffPhoto"
                alt=""
                class="thumbnail"
                @click="showQRCode(scoped.row.staffPhoto)"
              >
            </template>
          </el-table-column>
          <el-table-column label="姓名" sortable="" prop="username" />
          <el-table-column label="工号" sortable="" prop="workNumber" />
          <el-table-column label="聘用形式" sortable="" prop="formOfEmployment" :formatter="formOfEmployment" />
          <el-table-column label="部门" sortable="" prop="departmentName" />
          <el-table-column label="入职时间" sortable="">
            <template #default="scoped">
              {{ scoped.row.timeOfEntry | formatDate }}
            </template>
          </el-table-column>
          <el-table-column label="账户状态" sortable="" prop="enableState">
            <template #default="scoped">
              <!-- 状态 ：{{scoped.row.enableState}} -->
              <!-- 这里我们希望用饿了么的开关组件显示
              默认情况是双向绑定一个 v-model
              我们这里只希望显示，不希望修改
              其实一个 v-model = :value + @input -->
              <el-switch :value="scoped.row.enableState === 1" />
            </template>
          </el-table-column>
          <el-table-column label="操作" sortable="" fixed="right" width="280">
            <template #default="{row}">
              <el-button type="text" size="small" @click="$router.push(`/detail/${row.id}`)">查看</el-button>
              <el-button type="text" size="small">转正</el-button>
              <el-button type="text" size="small">调岗</el-button>
              <el-button type="text" size="small">离职</el-button>
              <el-button type="text" size="small" @click="assginRole(row.id)">角色</el-button>
              <el-button type="text" size="small" @click="delEmployee(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <el-pagination layout="prev, pager, next" :page-size="page.size" :total="page.total" @current-change="currentChange" />
        </el-row>
      </el-card>
      <addEmployee :show-dialog.sync="showDialog" @addEmployee="getEmployessList" />
      <!-- 生成头像二维码 -->
      <el-dialog
        title="头像二维码"
        :visible="isShowQRCode"
        @close="isShowQRCode=false"
      >
        <el-row width="400" height="400" type="flex" justify="center" align="middle">
          <canvas ref="mycanvas" />
        </el-row>
      </el-dialog>
      <!-- 角色 -->
      <AssginRole ref="assginRole" :show-role-dialog.sync="showRoleDialog" />
    </div>
  </div>
</template>

<script>
import { getEmployessList, delEmployee } from '@/api/employess'
import employessEnum from '@/api/constant/employees'
import { formatDate } from '@/filters'
import addEmployee from './components/add-employee.vue'
import QRcode from 'qrcode'
import AssginRole from './components/assignRole.vue'
// 因为用的少，避免占内存，所以直接在方法里面引入
// import {export_json_to_excel} from '@/vendor/Export2Excel'
export default {
  components: {
    addEmployee, AssginRole
  },
  data() {
    return {
      list: [],
      page: {
        page: 1,
        size: 5,
        total: 0
      },
      showDialog: false,
      isShowQRCode: false,
      showRoleDialog: false
    }
  },
  created() {
    this.getEmployessList()
    console.log('测试混入')
    console.log(this.textMixin())
  },
  methods: {
    async getEmployessList() {
      const { rows, total } = await getEmployessList(this.page)
      // 这里本地数据库没有enableState
      // 而线上有，这里我们前端处理一下
      this.list = rows.map(item => {
        return {
          ...item,
          enableState: item.enableState || 1
        }
      })
      this.page.total = total
      console.log(this.list)
    },
    currentChange(newPage) {
      this.page.page = newPage
      this.getEmployessList()
    },
    // 序列号处理
    getIndex(index) {
      return index + 1 + (this.page.page - 1) * this.page.size
    },
    // 格式化内容  聘用形式
    formOfEmployment(row, col, cell, index) {
      // 这里是格式化函数，每次运行到这列的时候
      // 都会执行这个函数，将 return 的值渲染出来
      // 这个函数可以获取到的数据中，第三个是本来应该渲染的当前格子数据
      // 这里是聘用形式尝试将它转成字符串
      // let str
      // if (cell === 1) {
      //   str = '正式'
      // } else {
      //   str = '非正式'
      // }

      // 1. 枚举数据，就是将所有可能性的标识id和对应的描述value列举出来

      // 2.通过枚举数据找出对应的内容
      const obj = employessEnum.hireType.find(item => Number(item.id) === Number(cell))
      // 安全判断，如果找不到就给个未知形式
      return obj ? obj.value : '未知形式'
    },
    // 导出
    async exportEmployees() {
      // 按需引入，可以使用 import（地址）实现
      // 是一个 promise 可以在 .then 或者 async await 到函数
      // 1.按需加载库
      const { export_json_to_excel } = await import('@/vendor/Export2Excel')
      // console.log(export_json_to_excel)
      // 使用方法
      // export_json_to_excel({
      //   header: ['姓名', '手机号', '工号'],
      //   data: [
      //     ['张鹏举', 13566666666, 12580],
      //     ['波波', 13577777777, 12581],
      //     ['大嘴波', 13599999999, 12582]
      //   ]
      // })
      // 2.加载所有员工数据
      const { rows } = await getEmployessList({ page: 1, size: this.page.total })
      console.log(rows)
      // 3.转换  变量不能用 .语法  因为文档需求表头header要用数组[]，数据data要用数组包数组[[]]
      const dict = {
        '手机号': 'mobile',
        '姓名': 'username',
        '入职日期': 'timeOfEntry',
        '聘用形式': 'formOfEmployment',
        '转正日期': 'correctionTime',
        '工号': 'workNumber',
        '部门': 'departmentName'
      }
      // 表头
      const header = Object.keys(dict)
      // console.log(header)
      const newData = rows.map(item => {
        return this.objToArray(item, dict)
      })
      // 4.导出
      export_json_to_excel({ header, data: newData })
    },
    // 对象转数组方法 [[]]
    objToArray(userObj, dict) {
      // 创建一个空数组
      const userArray = []
      // 遍历
      for (const key in dict) {
        // 转英文
        const enkey = dict[key]
        // 拿到数据的值
        const value = userObj[enkey]
        // push进空数组中
        // 如果是时间相关或者招聘形式需要额外处理
        if (enkey === 'timeOfEntry' || enkey === 'correctionTime') {
          // 处理时间
          // 之前有一堆函数注册过滤器，虽然这里用不了过滤器，但是对应的函数按照 js 原生的导入方式用起来还是没问题的
          userArray.push(formatDate(value))
        } else if (enkey === 'formOfEmployment') {
          // 处理聘用形式
          const obj = employessEnum.hireType.find(item => item.id === value)
          userArray.push(obj ? obj.value : '未知形式')
        } else {
          userArray.push(value)
        }
      }
      return userArray
    },
    // 删除员工
    async delEmployee(id) {
      //   1.二次确认
      await this.$confirm('是否要删除该员工?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      // 2.发起请求
      await delEmployee(id)
      // 3.提示成功
      this.$message.success('删除成功')
      // 4.更新数据
      if (this.list.length === 1 & this.page.page > 1) {
        this.page.page--
      }
      this.getEmployessList()
    },
    // 生成二维码
    showQRCode(url) {
      if (url) {
        this.isShowQRCode = true
        // 就这生成二维码
        // setTimout 是延时器, 等待一会才渲染
        // 我们这是想等渲染完毕, 但是只能靠猜 300 毫秒渲染完吧
        // setTimeout(() => {
        //   QRCode.toCanvas(this.$refs.myCanvas, url, {
        //     width: 300,
        //     color: {
        //       dark: '#407ffe'
        //     }
        //   })
        // }, 300)

        // vue 提供了一个函数, 可以讲一些逻辑放到当前渲染完毕的下一次操作流程再执行
        this.$nextTick(() => {
          // 这个回调会在当前代码渲染完毕后再执行
          QRcode.toCanvas(this.$refs.mycanvas, url,
            {
              width: 300,
              color: {
                dark: '#66b1ff'
              }
            })
        })
      }
    },
    // 角色
    async assginRole(id) {
      await this.$refs.assginRole.getUserDetailById(id)
      this.showRoleDialog = true
    }
    // 权限是否增加员工
    // checkPermission(btnName) {
    //   // 当前用户的功能点权限列表
    //   // 当前按钮的名称
    //   // 如果名称存在于列表中，就可以点击
    //   const permList = this.$store.state.user.userInfo.roles.points
    //   return permList.includes(btnName)
    // }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.thumbnail{
  width: 180px;
  height: 180px;
  // 设置宽高后保持图片比例不变
  object-fit: cover;
  border-radius: 6px;
}
</style>
